<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">新增</el-button>


    <el-container style="height:100%; border: 1px solid #eee">
      <!--导航-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>商品信息</template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="go">商品详情</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-container>

        <!--视图-->
        <el-main>
          <el-table
            :data="tableData">
            <el-table-column prop="id" label="商品id" width="100">
            </el-table-column>
            <el-table-column prop="gname" label="商品名称" width="400">
            </el-table-column>
            <el-table-column prop="gdes" label="门店地址" width="300">
            </el-table-column>
            <el-table-column prop="gprice" label="价格" width="200">
            </el-table-column>
            <el-table-column prop="gpic" label="图片" width="300">
              <template slot-scope="scope">
                <img style="width: 100px; height: 100px" :src="scope.row.gpic"></img>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.id)" type="text" size="small">删除</el-button>
                <el-button type="text" @click="upd(scope.row)">修改</el-button>
              </template>
            </el-table-column>

          </el-table>
          <!--分页插件-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[1, 2, 4, 6]"
            :page-size=params.size
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
          </el-pagination>

          <!--弹出框的新增或修改-->
          <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="30%" height="60%" :before-close="handleClose">
            <el-form ref="form" :model="tb_goods" :rules="rules" label-width="80px">
              <el-form-item label="商品名称" prop="gname">
                <el-input v-model="tb_goods.gname"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="gprice">
                <el-input-number v-model="tb_goods.gprice" :min="0" :controls="false" :precision="3"></el-input-number>
              </el-form-item>
              <el-form-item label="门店地址" prop="gdes">
                <el-input v-model="tb_goods.gdes"></el-input>
              </el-form-item>
              <el-form-item label="折扣" prop="gdiscount">
              <el-input-number v-model="tb_goods.gdiscount":min="0" :controls="false" :precision="3" ></el-input-number>
            </el-form-item>
              <el-form-item label="图片" prop="gpic">
                <!--<el-input v-model="tb_goods.gpic"></el-input>-->
                <!--图片上传-->
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="tb_goods.gpic" :src="tb_goods.gpic" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item>


            </el-form>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  export default {
    name: "Goods",
    data() {
      const item = {
      };
      return {
        //接收后台数据
        tableData: [],
        //图片显示的规格，种类
        fits: ['fill'],
        //请求路径
        url: [],
        // input: '',
        //弹出框
        dialogVisible: false,
        //新增或修改
        tb_goods:{},
        //文件上传
        fileList: [],
        rules:{
          gname: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          gdes: [
            { required: true, message: '请输入门店地址名称', trigger: 'blur' },
            { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
          ],
          gpic: [
            { required: true, message: '请上传图片', trigger: 'blur' },
          ],
          gprice: [
            { required: true, message: '请输入价格', trigger: 'blur' },
          ],
          gdiscount: [
            { required: true, message: '请输入折扣', trigger: 'blur' },
          ],
        },
        params:{
          page:1,
          size:4
        },
        total:10

      }
    },
    methods: {
      go: function () {

        // this.findAll()
      },
      findAll: function () {
        this.$axios.get("/goods/findAll?page="+this.params.page+"&size="+this.params.size+"").then(res => {
          // alert(res.data)
          this.tableData = res.data.data;
          this.total=res.data.total;
          // this.url=res.data.gpic

        })
      },

      handleClick(id) {
        this.$axios.post("/goods/deleteById?id=" + id).then(res => {
          this.findAll()
        })
      },
      //弹出框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //修改方发
      upd:function (row) {
        this.tb_goods=row
        this.dialogVisible=true


      },
      //分页
      handleSizeChange(val) {
       this.params.size=val
        this.findAll()
      },
      handleCurrentChange(val) {
        this.params.page=val
        this.findAll()
      },

      //表单提交
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            this.$axios.post("/goods/updateOrSave", this.tb_goods).then(res => {


              this.findAll()
              this.dialogVisible = false

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      //图片上传
      handleAvatarSuccess(res, file) {
        this.tb_goods.gpic = res;

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    },
    mounted() {
      this.findAll()
    }
  };


</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
